<template>
    <Form
        class="declare-form"
        ref="form"
        :model="form"
        :rules="formRules"
        :show-message="false"
        v-blur="blurEvent"
        v-focusJump="{
            onEnter: enterEvent,
            onLast: handleLastEnter
        }"
    >
        <Row>
            <iCol class="form-label" span="8">集装箱号</iCol>
            <iCol span="16">
                <FormItem
                    prop="containerNo"
                    class="formInput requireBG"
                    style="margin-top: 1px;"
                    :error="tips.containerNo"
                >
                    <Input
                        name="containerNo"
                        :disabled="disabled"
                        :maxlength="11"
                        :value="form.containerNo"
                        @input="handleContainerNoToUp"
                        :title="tips.containerNo"
                    ></Input>
                </FormItem>
            </iCol>
        </Row>
        <Row>
            <iCol class="form-label" span="8">集装箱规格</iCol>
            <iCol span="16">
                <FormItem
                    prop="containerType"
                    class="formInput requireBG"
                    style="margin-top: 0;"
                    :error="tips.containerType"
                >
                    <RemoteSearch
                        name="containerType"
                        :disabled="disabled"
                        :title="tips.containerType"
                        v-model="form.containerType"
                        keyword
                        :list="containerTypeList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                        @on-get-name="v => form.containerTypeName = v"
                    ></RemoteSearch>
                </FormItem>
            </iCol>
        </Row>
        <Row>
            <iCol class="form-label" span="8">自重（KG）</iCol>
            <iCol span="16">
                <FormItem
                    prop="containerWt"
                    class="formInput"
                    :error="tips.containerWt"
                >
                    <Input
                        name="containerWt"
                        :disabled="disabled"
                        v-model="form.containerWt"
                        :maxlength="13"
                        :title="tips.containerWt"
                    ></Input>
                </FormItem>
            </iCol>
        </Row>
        <Row>
            <iCol class="form-label" span="8">拼箱标识</iCol>
            <iCol span="16">
                <FormItem prop="lclFlag" class="formInput mt-2">
                    <RemoteSearch
                        name="lclFlag"
                        :disabled="disabled"
                        v-model="form.lclFlag"
                        keyword
                        :list="booleanList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                    ></RemoteSearch>
                </FormItem>
            </iCol>
        </Row>
        <Row>
            <iCol class="form-label" span="8">商品项号关系</iCol>
            <iCol span="14">
                <FormItem
                    prop="contrItems"
                    class="formInput requireBG"
                    :error="tips.contrItems"
                >
                    <Input
                        name="contrItems"
                        v-model="form.contrItems"
                        :maxlength="99"
                        :disabled="disabled"
                        :title="tips.contrItems"
                    ></Input>
                </FormItem>
            </iCol>
            <iCol class="border morecenter" span="2">
                <Button
                    :disabled="disabled"
                    class="morebtn"
                    type="primary"
                    @click="openGoodsRelation"
                >
                    <i class="icon iconfont icon-more"></i>
                </Button>
            </iCol>
        </Row>
    </Form>
</template>

<script>
import RemoteSearch from '@/view/components/RemoteSearch'
import { formRules, formMethods } from '@/mixins/form/form'
import eventMixin from '@/mixins/form/event'

export default {
    mixins: [
        eventMixin,
        formRules,
        formMethods
    ],
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        // 集装箱规格选项
        containerTypeList: {
            type: Array,
            default: function () {
                return []
            }
        },
        // 集装箱规格选项
        booleanList: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    components: {
        RemoteSearch
    },
    data () {
        return {
            form: {
                declareId: '', // 报关报检单id,
                declareContainerId: '', // 报关单集装箱id,
                containerIndex: '', // 序号,
                containerNo: '', // 柜号,
                containerType: '', // (字典) 箱型,
                containerTypeName: '',
                containerWt: '', // 自重,
                contrItems: '', // 商品项号， 用半角逗号分隔， 如“ 1, 3”,
                lclFlag: '' // 拼箱标识,
            },
            tips: {
                containerNo: '',
                containerType: '',
                contrItems: '',
                containerWt: ''
            }
        }
    },
    methods: {
        openGoodsRelation () {
            this.$emit('openGoodsRelation')
        },
        // 集装箱号前4位转大写
        handleContainerNoToUp (v) {
            const value = String(v).replace(/^\s+|\s+$/, '')
            this.form.containerNo =
                value.slice(0, 4).toLocaleUpperCase() + value.slice(4)
        }
    }
}
</script>
